<template>
    <div class="InvoiceDialog">
      <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> 
        <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
      </object>
      <el-dialog title="发票管理" :visible.sync="$parent.InvoiceDialogFlag" width="60%" height="600"  v-dialogDrag border @close="closeDialog()">
         <el-row :gutter="5">
          <el-button type="primary"  @click="RePrint()" :disabled="printFlag">重打</el-button>
          <el-button type="primary" @click="CancelPrint()" :disabled="printFlag">作废</el-button>
          <el-button type="primary" @click="CreateRed()" :disabled="printFlag">冲红</el-button>
        </el-row>
        <el-row :gutter="5">
          <el-table
            :cell-style="cellStyle"
            ref="singleTable"
            :data="tableData"
            border :header-cell-style="{background:'rgb(222,225,230)',color:'#606266'}"  @row-click="handleSelectionInvoice" @select="select">
            <el-table-column
              type="selection"
              :selectable="selectable"
              width="50"/>
            <el-table-column  align='center' prop="invoiceTime" label="打印时间"  width="150" >
            </el-table-column>
            <el-table-column
              prop="invoiceCode"
              align='right'
              label="发票代码"
              width="200">
            </el-table-column>
            <el-table-column
              prop="invoiceNo"
              align='right'
              label="发票号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="invoiceTitle"
              align='center'
              label="发票抬头"
              width="200">
            </el-table-column>
            <el-table-column
              prop="invoiceCharge"
              align='right'
              label="发票金额"
              width="100">
            </el-table-column>
            <el-table-column
              prop="invoiceState"
              align='right'
              label="发票状态"
              width="100">
            </el-table-column>
          </el-table>
        </el-row>
        <el-row :gutter="5">
          <el-button type="primary"  @click="RedToRePrint()" :disabled="printFlag">重打红票</el-button>
        </el-row>
        <el-row :gutter="5">
          <el-table
            ref="singleRedTable"
            :cell-style="cellStyle"
            :data="tableRedData"
            border :header-cell-style="{background:'rgb(222,225,230)',color:'#606266'}"  @select="selectRed" @selection-change="handleSelectionRedInvoice">
            <el-table-column
              type="selection"
              :selectable="selectable"
              width="50"/>
            <el-table-column  align='center' prop="itemName" label="打印时间"  width="150" >
            </el-table-column>
            <el-table-column
              prop="invoiceCode"
              align='right'
              label="发票代码"
              width="200">
            </el-table-column>
            <el-table-column
              prop="invoiceNo"
              align='right'
              label="发票号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="invoiceTitle"
              align='center'
              label="发票抬头"
              width="200">
            </el-table-column>
            <el-table-column
              prop="invoiceCharge"
              align='right'
              label="发票金额"
              width="100">
            </el-table-column>
            <el-table-column
              prop="invoiceCancelNo"
              align='right'
              label="原发票号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="invoiceState"
              align='right'
              label="发票状态"
              width="100">
            </el-table-column>
          </el-table>
        </el-row>
      </el-dialog>
      <PrintRedDialog :PrintRedFlag="PrintRedFlag"  :selectedRed="selectedInvoice" :businessCode="businessCode"></PrintRedDialog>
    </div>
</template>

<script>
  import * as Type from '@/api/service'
  import PrintRedDialog from "./PrintRedDialog"
  import {getLodop} from '@/utils/lodopFuncs'
  export default {
    name: "InvoiceDialog",
    components: {PrintRedDialog},
    props: {
      InvoiceFlag: {
        type: Boolean
      },
      businessCode: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        tableData:[],//发票记录
        tableRedData:[],//红票记录
        printFlag:false, //保存标志
        selectedInvoice:[],//选择发票记录集合
        selectedRedInvoice:[],//选择红票记录集合
        PrintRedFlag:false,//冲红发票
      }
    },
    created() {

    },
    mounted() {

    },
    watch: {
      '$parent.InvoiceDialogFlag'() {
        if (this.$parent.InvoiceDialogFlag == false) {
          this.tableData = []
          this.tableRedData = []
        }else {
          //加载数据
          this.loadChargeInvoiceAllInfo();
        }
      }, //冲红刷新
      'PrintRedFlag'() {
        if (this.PrintRedFlag == false) {
          this.loadChargeInvoiceAllInfo()
        }
      },

    },
    methods: {
      // 单元格的 style 的回调方法
      cellStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0 || columnIndex === 9) {
          return `background-color:rgb(250,250,250);`;
        } else {
          return ''
        }
      },
      /*加载所有*/
      loadChargeInvoiceAllInfo:function(){
          let this_load=this;
        //判断查询条件报错
        if(this_load.businessCode!=null && this.businessCode!=""){
          let postData = {
            "businessCode": this_load.businessCode
          }
          Type['loadChargeInvoiceAll'](postData).then(response => {
            let result = response;
            if (result){
              //发票列表
              this_load.tableData=result.data.invoiceItems
              //红票列表
              this_load.tableRedData=result.data.invoiceRedItems

            }
          }).catch(error => {
            this_load.$message(error)
          })
        }
      },
      //设置是否选中
      selectable(row, index) {
        if (row.asSettled == 1 || row.asUnsettled == 1) {
          return false
        } else {
          return true
        }

      },
      //重打
      RePrint() {
        let this_rePrint=this;
        let item=this_rePrint.selectedInvoice[0]
        let flag=this_rePrint.CheckRePrint();
        if( !flag){
          this.$message("作废发票不允许重打")
          return;
        }
        if(item.businessCode && item.businessCode!=null && item.businessCode!=""){
            //开始重打
          let postData={
            'businessCode':item.businessCode,
            'invoiceId':{
              'id':item.id,
              'version':item.version
            }
          }
          this_rePrint.printFlag = true;
          Type['saveChargeInvoiceToReprint'](postData).then(response => {
            let result = response;
            if (result && result.data ){
              this_rePrint.RePrintData(result.data);
            }
            this_rePrint.printFlag = false;
          }).catch(error => {
            this_rePrint.$message(error)
            this_rePrint.printFlag = false;
          })
        }else{
          this.$.messager.alert('系统提示', '请选择一条发票记录');
        }

      },
      //检查重打
      CheckRePrint(){
        let this_rePrint=this;
        let item=this_rePrint.selectedInvoice[0]
        let flag=true;
        if(item.businessCode && item.businessCode!=null && item.businessCode!=""&& item.invoiceStateCode !=null  && item.invoiceStateCode=='3'){
            flag=false;
        }
        return flag;
      },
      //重打发票
      RePrintData(printData){
        let this_print=this;
        let LODOP =  getLodop();
        if (LODOP == null || !LODOP) {
          this_print.$.messager.alert('系统提示', '您的浏览器不支持打印控件，请用IE重试或安装打印控件后重试');
          return;
        }
        //业务编码
        let businessCode=printData.businessCode;
        //交款人
        let persion="交款人";
        //项目名称
        let itemName="项目名称";
        let itemPrice="XXXX";
        let itemTotal="XXXX";
        let bigTitle="壹贰叁肆伍陆柒捌玖";
        //收费日期
        let  businessTime="2020   05   22"
        //业务办理人
        let  businessPersion="管理员";
        //设置纸张
        //LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
        //设置字体
        LODOP.SET_PRINT_STYLE("FontSize",11);
        //调用打印控件进行测试

        LODOP.ADD_PRINT_TEXT(39,50,150,50, businessCode);
        LODOP.ADD_PRINT_TEXT(39,250,150,50, businessTime);
        LODOP.ADD_PRINT_TEXT(60,50,150,50, persion);
        LODOP.ADD_PRINT_TEXT(80,50,150,50, itemName);
        LODOP.ADD_PRINT_TEXT(80,120,150,50, itemPrice);
        LODOP.ADD_PRINT_TEXT(300,220,150,50, itemTotal);
        LODOP.ADD_PRINT_TEXT(300,420,150,50, bigTitle);
        LODOP.ADD_PRINT_TEXT(340,420,150,50, businessPersion);
        //打印预览
        LODOP.PREVIEW();
        //直接打印
        //LODOP.PRINT();
        //LODOP.PRINT_DESIGN();
      },//作废发票接口
      CancelPrint() {
        let item=this.selectedInvoice[0];
        if(item.businessCode && item.businessCode!=null && item.businessCode!=""){
            //开始重打
          let postData={
            'businessCode':item.businessCode,
            'invoiceId':{
              'id':item.id,
              'version':item.version
            }
          }
          this.printFlag = true;
          Type['saveChargeInvoiceToCancellation'](postData).then(response => {
            let result = response;
            if (result){
              this.$message("发票作废成功")
            }
            this.printFlag = false;
          }).catch(error => {
            this.$message(error)
            this.printFlag = false;
          })
        }

      },//通过id获得发票记录数据
      //生成冲红发票
      CreateRed(){
         //判断是否选中发票记录
        if(this.selectedInvoice && this.selectedInvoice.length>0 && this.businessCode!=null && this.businessCode!=''){
          let this_rePrint=this;
          //检查是否作废
          let flag=this_rePrint.CheckRePrint();
          if( !flag){
            this.$message("作废发票不允许冲红")
            return;
          }
          //冲红窗口
            this.PrintRedFlag=true
        }else{
            this.$message("请选中要冲红的发票记录")
        }
      },//冲红票重打
       RedToRePrint(){
         let this_preview=this;
         let item=this.selectedRedInvoice[0];
              item=item[0]
         if(item.businessCode && item.businessCode!=null && item.businessCode!=""){
           //开始重打
           let postData={
             'businessCode':item.businessCode,
             'invoiceId':{
               'id':item.id,
               'version':item.version
             }
           }
           this.printFlag = true;
           Type['saveChargeInvoiceRedToReprint'](postData).then(response => {
             let result = response;
             if (result){
               //this.$message("红票重打成功")
               if(result.data){
                 //开始打印冲红票
                 this.RePrintRedInvoice(result.data);
               }
             }
             this.printFlag = false;
           }).catch(error => {
             this.$message(error)
             this.printFlag = false;
           })
         }else{
           this.$message.alert('系统提示', '请选择一条冲红记录')
         }
      }, //冲红票打印红票
      RePrintRedInvoice(printData){
        let this_print=this;
        let LODOP =  getLodop();
        if (LODOP == null || !LODOP) {
          this_print.$.messager.alert('系统提示', '您的浏览器不支持打印控件，请用IE重试或安装打印控件后重试');
          return;
        }
        //冲红字
        let redWord="冲红";//数值是负的
        //业务编码
        let businessCode=printData.businessCode;
        //交款人
        let persion="交款人";
        //项目名称
        let itemName="项目名称";
        let itemPrice="XXXX";
        let itemTotal="XXXX";
        let bigTitle="壹贰叁肆伍陆柒捌玖";
        //收费日期
        let  businessTime="2020   05   22"
        //业务办理人
        let  businessPersion="管理员";
        //设置纸张
        //LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
        //设置字体
        LODOP.SET_PRINT_STYLE("FontSize",11);
        //调用打印控件进行测试
        LODOP.ADD_PRINT_TEXT(20,50,50,50, redWord);
        LODOP.ADD_PRINT_TEXT(39,50,150,50, businessCode);
        LODOP.ADD_PRINT_TEXT(39,250,150,50, businessTime);
        LODOP.ADD_PRINT_TEXT(60,50,150,50, persion);
        LODOP.ADD_PRINT_TEXT(80,50,150,50, itemName);
        LODOP.ADD_PRINT_TEXT(80,120,150,50, itemPrice);
        LODOP.ADD_PRINT_TEXT(300,220,150,50, itemTotal);
        LODOP.ADD_PRINT_TEXT(300,420,150,50, bigTitle);
        LODOP.ADD_PRINT_TEXT(340,420,150,50, businessPersion);
        //打印预览
        LODOP.PREVIEW();
        //直接打印
        //LODOP.PRINT();
        //LODOP.PRINT_DESIGN();
      },

      closeDialog() {
        this.$parent.InvoiceFlag = false
      },//选择发票事件
        handleSelectionInvoice(row, column, event) {
          //只选中一条
          this.selectedInvoice = [row]
      }, select(selection, row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          this.$refs.singleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.selectedInvoice = selection
      },//冲红点击单选
      handleSelectionRedInvoice(row, column, event) {
        //只选中一条
        this.selectedRedInvoice = [row]
      },//冲红check单选
      selectRed(selection,row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          this.$refs.singleRedTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.selectedRedInvoice = selection
      },
    },
  }
</script>
<style>
  .InvoiceDialog {
    width:800px;
    height:600px;
  }
  .InvoiceDialog .el-dialog__title, .InvoiceDialog .el-dialog__headerbtn .el-dialog__close {
    color: white;
  }

  .InvoiceDialog .el-dialog {
    min-width: 800px !important;
  }

  .InvoiceDialog .el-input, .InvoiceDialog .el-select, .InvoiceDialog .el-form-item__content {
    width: 200px;
  }

  .InvoiceDialog .el-textarea__inner {
    width: 534px;
  }

  .InvoiceDialog .el-icon-check[data-v-7f39c8b7]:before {
    margin-left: 0em;
  }
  .TotalMoney .InvoiceDialog{
    height: auto;
  }
</style>
<style scoped>
  @media screen and (max-width: 300px) {
    body {
      background-color: lightblue;
    }
  }

  .tablewrapper {
    display: flex;
  }

  .tablewrapper .table {
    display: inline-block;
    flex: 1;
    width: 50%;
    padding: 0 1em;
    border: 1px solid rgb(220, 223, 230);
  }

  .tablewrapper .table .title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 3rem;
  }

  .tablewrapper .table .tablecont {
    padding: 1em;
    line-height: 2em;
    text-indent: 2em;
  }

  .el-icon-close:before {
    color: red;
    font-size: 1.5em;
    line-height: 2em;
  }

  .el-icon-check:before {
    color: green;
    font-size: 1.5em;
    line-height: 2em;
    margin-left: 1em;
  }
  .totalw {
    display: inline-block;
    width: 80px;
    font-weight:600;
  }
</style>
